 <template>
  <div class="new">
    <div style="position:fixed;background-color:#fff;width:100%;z-index:999">
       <div class="top">
      <van-icon name="arrow-left" @click="back"/>
      <span style="font-size: 30px; font-weight: bold">最新菜谱列表</span>
      <van-icon size="30" name="gem-o" dot @click="jumpActiveFn"/>
    </div>

    <van-notice-bar
      left-icon="volume-o"
      text="美食热榜推荐最新预告，快来看看吧！重磅美食来袭，走过路过不要错过哦~~还有更多惊喜等你放送"
    />
    </div>
    <div class="zhanwei" style="height:130px"></div>
    
    <!-- 最新列表渲染 -->
    <div class="list">
      <ul>
        <li @click="fooddetailFn(item.id)" v-for="item in this.$store.state.zuixinList" :key="item.id">
          <div class="img_content">
          
            <img :src="item.img" alt="" />
            <div class="text_content">
              <p>{{ item.introduct }}</p>
              <p >{{ item.name }}</p>
              <p><van-icon name="eye-o" />{{item.look}}</p>
              <p><van-icon name="fire-o" />{{item.vc}}</p>
            </div>
          </div>
          
        </li>
      </ul>
    </div>
    <div class="none">
      <van-loading />正在刷新请稍后~~
      </div>

    <div class="content"></div>
  </div>
</template>
<script>
import { Food_zuixin } from "../api/index";
export default {
  created() {
    this.Food_zuixinFn();
  },

  methods: {
    jumpActiveFn(){
      this.$router.push({path:'/active'})
    },
    async Food_zuixinFn() {
      await Food_zuixin().then((content) => {
        // console.log(content);
        let { state, result } = content;
        if (state == "success") {
          let { list } = result;
          // console.log(list);
          let filteredList = list.filter((item) => item.hasOwnProperty("r"));
          //  console.log(filteredList);
          let objs = filteredList.map((item) => ({
            id: item.r.id,
            img: item.r.img,
            introduct: item.r.n,
            vc: item.r.vc,
            radio: item.r.vfurl,
            collect: item.r.collect_users,
            name: item.r.stdname,
            look: item.r.pw,
          }));
          // console.log('objs',objs);
          this.$store.state.zuixinList = objs;
          console.log(this.$store.state.zuixinList);
        }
      });
    },
    back(){
      this.$router.push({path:'./'})

    },
    fooddetailFn(id){
     this.$router.push({path:'./foodetail',query:{id}})
     console.log(id);
    }
  },
};
</script>

 <style lang="less">
 @import "../css/varaible.less";
.content {
  padding-bottom: 70px; /* 假设底部导航栏的高度是70px */
}
.list {
  padding: 0 15px;
  ul {
    li {
      margin-top: 10px;
      .img_content{
        display: flex;
        img {
          width: 200px;
        }
        .text_content {
          margin-left: 10px;
          p {
            // width: 100%;
            font-size: 12px;
            .van-icon{
              margin-right: 10px;
            }
            &:nth-child(1) {
              margin-bottom: 10px;
              -webkit-line-clamp: 2;
              font-weight: bold;
              font-size: 18px;
              overflow: hidden;
              text-overflow: ellipsis;
              max-height: 3em; /* 设置为行高的两倍 */
              line-height: 1.5em; /* 这里的行高应与下面p标签中的行高一致 */
            }
            &:nth-child(2){
              color: @textColor;
            }
          }
        }
       
      }
       
    }
  }
}
.none{
  text-align: center;
  font-size: 14px;
  color:@textColor ;
  margin-top: 10px;
}
.top {
  margin-top: 10px;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    vertical-align: middle;
  }
}
.van-notice-bar {
  margin-top: 10px !important;
}
</style>


